<!-- 静态table,分页不请求 -->
<template>
  <div class="static-table">
    <el-table :data="state.data" v-bind="$attrs">
      <slot></slot>
    </el-table>

    <div class="flex-center">
      <pagination
        v-show="state.total > 9"
        :total="state.total"
        v-model:page="state.pageNum"
        v-model:limit="state.pageSize"
        @pagination="getList"
        :autoScroll="false"
      />
    </div>
  </div>
</template>

<script setup>
import { deepClone } from '@/utils'
const props = defineProps({
  tableList: {
    type: Array,
    default: () => []
  }
})
const state = reactive({
  total: 0,
  pageNum: 1,
  pageSize: 10,
  data: [],
  tableList: []
})

watch(
  () => props.tableList,
  (val) => {
    if (val && val.length > 0) {
      const data = deepClone(val ?? [])
      data.map((item, i) => {
        item.staticIndex = i + 1
      })
      state.total = data.length
      state.tableList = data

      getList()
    }
  },
  { immediate: true, deep: true }
)

function getList() {
  const { pageNum, pageSize } = state
  const start = pageSize * (pageNum - 1)
  const end = start + pageSize
  const data = toRaw(state.tableList)

  state.data = data?.slice(start, end)
}
</script>

<style lang="scss" scoped>
.static-table {
  .pagination-container {
    margin-top: 10px;
  }
  :deep(.pagination-container .el-pagination) {
    position: relative;
    // right: 0;
  }
}
</style>
